<template>
  <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
	<div v-if="isAuth(['ROOT', 'DRIVER_AGREEMENT:SELECT'])">
		<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
			<el-form-item prop="agreementSn"><el-input v-model="dataForm.agreementSn" placeholder="合同编号" size="medium" clearable="clearable" /></el-form-item>
			<el-form-item prop="tel"><el-input v-model="dataForm.driverName" placeholder="司机名称" size="medium" class="input" clearable="clearable" /></el-form-item>
			<el-form-item>
				<el-date-picker v-model="dataForm.date" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" size="medium"></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-select v-model="dataForm.status" class="input" placeholder="状态" size="medium" clearable="clearable">
					<el-option label="未生成" value="0" />
					<el-option label="已生成" value="1" />
					<el-option label="已寄出" value="2" />
					<el-option label="成功签署" value="3" />
					<el-option label="签署失败" value="4" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button size="medium" type="primary" @click="searchHandle()"  icon="el-icon-search">搜索</el-button>
				<el-button size="medium" type="primary" :disabled="!isAuth(['ROOT', 'DEPT:INSERT'])" @click="handleUpload">上传合同<i class="el-icon-upload el-icon--right"></i></el-button>
			</el-form-item>
		</el-form>
		<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" cell-style="padding: 4px 0" size="medium" style="width: 100%;">
			<el-table-column type="selection" :selectable="selectable" header-align="center" align="center" width="50" />
			<el-table-column type="index" header-align="center" align="center" width="100" label="序号">
				<template #default="scope">
					<span>{{ (page - 1) * rows + scope.$index + 1 }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="driverName" header-align="center" align="center" label="司机姓名" min-width="80" />
			<el-table-column prop="agreementSn" header-align="center" align="center" label="合同编号" min-width="120" />
			<el-table-column prop="status" header-align="center" align="center" label="状态" min-width="80" >
        <template #default="scope">
          <span v-if="scope.row.status == 0" style="color: #13ce66">未生成</span>
          <span v-if="scope.row.status == 1" style="color: #ebe541">已生成</span>
          <span v-if="scope.row.status == 2" style="color: #e6a23c">已寄出</span>
          <span v-if="scope.row.status == 3" style="color: #32b374">成功签署</span>
          <span v-if="scope.row.status == 4" style="color: #fa3534">签署失败</span>
        </template>
      </el-table-column>
			<el-table-column prop="createTime" header-align="center" align="center" label="创建时间" min-width="150" />
			<el-table-column header-align="center" align="center" width="300" label="操作">
				<template #default="scope">
					<el-button plain size="small"  :disabled="!isAuth(['ROOT', 'DRIVER_AGREEMENT:UPDATE'])" @click="previewContract(scope.row.id)" >
						查看合同
					</el-button>
          <span style="margin-right: 50px;"></span> <!-- 增加间距的空元素 -->
					<el-button plain  size="small" :disabled="!isAuth(['ROOT', 'DRIVER_AGREEMENT:DELETE'])" @click="deleteContract(scope.row.id)">
						作废
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
			:current-page="page"
			:page-sizes="[10, 20, 50]"
			:page-size="rows"
			:total="totalCount"
			layout="total, sizes, prev, pager, next, jumper"
		></el-pagination>

    <el-dialog
      :title="title"
      v-model="uploadFormVisible"
      width="600px"
      :close-on-click-modal="true"
    >
      <el-form :model="uploadForm" label-width="100px"  ref="uploadForm" enctype="multipart/form-data" >
        <el-form-item label="选择司机" prop="driverName">
          <el-select  v-model="selectedDriver" class="input"   clearable="clearable">
            <el-option
                v-for="driver in driverList"
                :key="driver.id"
                :label="driver.name"
                :value="driver.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同编号" prop="agreement" >
          <el-input  auto-complete="off" style="width: 150px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="选择合同" enctype="multipart/form-data">

          <el-upload
              class="upload-demo"
              ref="upload"
              name="file"
              :action="uploadUrl"
              :on-success="handleSuccess"
              :on-change="changeFile"
              :on-remove="handleRemove"
              :http-request="uploadContract"
              :auto-upload="false"
              :file-list="fileList"
              limit="1"
              accept=".pdf,.doc,.docx,.mp4"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              文件格式：pdf,doc
            </div>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="uploadFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="submitUpload" :loading="loading">提交</el-button>
      </div>
    </el-dialog>
		<add-or-update ref="addOrUpdate" @refreshDataList="loadDataList"></add-or-update>

<!--    <iframe :src="pdfUrl" width="100%" height="500px"></iframe>-->
	</div>
</template>

<script>
import axios from "axios";
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {

	data: function() {
		return {
      pdfUrl: "http://192.168.1.111:9090/20240308/1709970477738-简历-最新.pdf",
      viewer: null,
      selectedDriver:null,
      driverList:[],
      loading:false,
      uploadUrl:"http://localhost:10010/fengycx/driver/manager/driverAggrement/upload",
      fileList: [],
      uploadForm:{
        driverId: "",
        agreementSn: null
      },
      title:"",
      uploadFormVisible:false,
      searchForm: {
        query:{
          name: null,
          agreementSn: null,
          date:null
        },
        page: 1,
        rows: 10
      },
			dataForm: {
				agreementSn: null,
				status: null,
        driverName:'',
				createDate: []
			},
			dataList: [],
			page: 1,
			rows: 10,
			totalCount: 0,
			dataListLoading: false,
			dataListSelections: [],
			dataRule: {
				tel: [{ required: false, pattern: '^1\\d{10}$', message: '电话格式错误' }]
			}
		};
	},
	methods: {
    changeFile(file,fileList){
      //选择文件后，给fileList对象赋值
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      //删除文件后，给fileList对象赋值
      this.fileList = fileList;
    },
    submitUpload() {
      const _this =this;
      _this.loading=true;
      this.$refs.upload.submit();
    },
    //上传合同
    uploadContract(request) {
      const _this =this;
      const formData = new FormData();
      formData.append('file', request.file,_this.selectedDriver);
      axios.post(_this.uploadUrl, formData,{
        headers: {
          //请求头这个一定要写
          'Content-Type': 'multipart/form-data',
          'satoken':localStorage.getItem("satoken")
        },
      }).then(function (res) {
        const {data} = res
        if(data.success){
          _this.loading=false;
          _this.handleSuccess(res);
          _this.loadDataList();
          _this.uploadFormVisible=false;
          _this.$message("上传成功！")


        }
      }).catch(function (error){
        console.log(error)
      })
    },
    //文件上传成功后执行该方法
    handleSuccess(res){
      this.loading = false; // 隐藏加载状态
      const _this=this;
      let uploadFileParam={
        "driverId":_this.selectedDriver,
        "agreementPathOriginal":res.data.data
      }
      _this.post("/driver/manager/driverAggrement/saveContract",uploadFileParam)
    },
    //预览合同
    previewContract(id){
      const _this=this;
      _this.get("/driver/manager/driverAggrement/previewContract/"+id,(res)=>{
        const {success,data}=res
        if(success){
           _this.pdfUrl= data
          console.log(1111111111)
          console.log(_this.pdfUrl)
        }
      })
    },
    //合同作废
    deleteContract(id){
      const _this=this;
      this.$confirm("确认作废吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(()=>{
        _this.post("/driver/manager/driverAggrement/destroyContract",id,(res)=>{
          const {success}=res
          if(success){
            _this.$message("合同已作废！")
          }
        })

      })

    },
    saveSubmit(){
      const _this=this;
      _this.uploadFile();
    },
    //点击上传
    handleUpload(){
      let _this=this;
      _this.uploadForm=null;
      _this.fileList=[];
      _this.uploadFormVisible=true;
      _this.title="上传合同";
      _this.post("/driver/manager/driverAuthMaterial/list",(res)=>{
        const {data}=res
        console.log(res)
        _this.driverList = data.map(driver => driver);
      })

    },
    //加载列表数据
    loadDataList(){
      let _this = this;
      for(var prop in _this.searchForm.query) {
        if (_this.searchForm.query[prop] == "") {
          _this.searchForm.query[prop] = null;
        }
      }
      _this.post("/driver/manager/driverAggrement/pagelist",_this.searchForm,(res)=>{
        let {success,data} = res;
        if(success){
          _this.totalCount = data.total;
          _this.dataList = data.rows;
        }
      });

    }
		
	},
	created: function() {
    this.loadDataList();
    // this.viewer = new Viewer(this.$el.querySelector('iframe'), {
    //   url: 'src'
    // });
	}
};
</script>

<style></style>
